<template>
  <div>
    <div class="permissionHeader">
      <el-input size="small" placeholder="请输入名称" v-model="permission.name">
        <template #prepend>ROLE_</template>
      </el-input>
      <el-input size="small" v-model="permission.nameZh" placeholder="请输入角色名"></el-input>
      <el-button icon="el-icon-circle-plus-outline" type="danger" size="small" @click="addRole">添加</el-button>
    </div>
    <div class="permissionMain">
      <el-collapse v-model="activeName" @change="changeCollapse" accordion>
        <el-collapse-item v-for="(r, index) in roles" :title="r.nameZh" :name="r.id" :key="index">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>可访问资源</span>
                <el-button class="button"
                           style="color: #dc191d;"
                           type="text"
                           icon="el-icon-delete"
                           @click="deleteRole(r.id)"></el-button>
              </div>
            </template>
            <div>
              <el-tree show-checkbox
                       :key="index"
                       :data="allMenus"
                       :props="defaultProps"
                       :default-checked-keys="selectMenus"
                       :default-expanded-keys="[1]"
                       node-key="id"
                       ref="tree"
                       @node-click="handleNodeClick"></el-tree>
              <div style="display: flex; justify-content: flex-end">
                <el-button size="mini" @click="cancelUpdate">取消修改</el-button>
                <el-button size="mini" type="warning" @click="doUpdate(r.id, index)">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "PermissiManage",
  data() {
    return {
      permission: {
        name: '',
        nameZh: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      activeName: -1,
      roles: [],
      allMenus: [],
      selectMenus: []
    }
  },
  methods: {
    deleteRole(rid) {
      if (rid) {
        this.deleteRequest('/system/basic/permission/role/' + rid).then(resp => {
          if (resp) {
            this.initPermssions();
            this.activeName = -1;
          }
        });
      }
    },
    addRole() {
      if (this.permission.name && this.permission.nameZh) {
        this.postRequest('/system/basic/permission/role', this.permission).then(resp => {
          if (resp) {
            this.initPermssions();
            this.activeName = -1;
          }
        });
      } else {
        this.$message({
          type: 'error',
          message: '请填写完整信息'
        })
      }
    },
    cancelUpdate() {
      this.activeName = -1;
    },
    doUpdate(rid, index) {
      let tree = this.$refs.tree[index];
      let checkKeys = tree.getCheckedKeys(true);
      let url = '/system/basic/permission/?rid=' + rid;
      checkKeys.forEach(item => {
        url += '&mIds=' + item;
      });

      this.putRequest(url).then(resp => {
        if (resp) {
          this.initPermssions();
          this.activeName = -1;
          this.changeCollapse(rid);
        }
      });
    },
    //折叠面板点击事件
    changeCollapse(rid) {
      if (rid) {
        this.initPermissionMenu();
        this.initSelectMenu(rid);
      }
    },
    // 获取角色化菜单
    initSelectMenu(rid) {
      this.getRequest('/system/basic/permission/mid/'+rid).then(resp => {
        if (resp) {
          this.selectMenus = resp.obj;
        }
      });
    },
    //初始化获取所有菜单
    initPermissionMenu() {
      this.getRequest('/system/basic/permission/menus').then(resp => {
        if (resp) {
          this.allMenus = resp.obj;
        }
      });
    },
    initPermssions() {
      this.getRequest('/system/basic/permission/').then(resp => {
        if (resp) {
          this.roles = resp.obj;
        }
      });
    },
    handleNodeClick(data) {
      // console.log(data);
    }
  },
  mounted() {
    this.initPermssions();
  }
}
</script>

<style>
.permissionHeader {
  display: flex;
  justify-content: flex-start;
}

.permissionHeader .el-input {
  width: 280px;
  margin-right: 10px;
}

.permissionMain {
  margin-top: 10px;
  width: 650px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 650px;
}
</style>